import { WeaTableEditable, WeaLocaleProvider, WeaSelect } from 'ecCom';
import { observer } from 'mobx-react';
import { Button } from 'antd';
import * as React from 'react';
import Dialog from '.';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class AddSelectOptionsDialog extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <Dialog dialog={store}>
                
                <WeaTableEditable
                    draggable={true}
                    title={<span style={{ marginLeft: "10px", width: 150 }}>{'关联子字段'} :<WeaSelect
                        options={store.relatedChildGroup}
                          style ={{width:100, marginLeft:20}}
                         value={store.relatedChild}
                        // viewAttr={viewAttr}
                        onChange={store.childChange}
                    /></span>}
                    showCopy={false}
                    columns={[{
                      com: [
                          { type: 'input' , viewAttr: 3, key: 'selectName' }
                      ],
                      dataIndex: 'selectName',
                      title: getLabel('502867', '可选项文字'),
                      width: '40%',
                  }, {
                      com: [
                          { type: 'select', key: 'childValue', multiple: (store.selectValue || []).length > 0, options: store.selectValue || [], style:{width: 220}}
                      ],
                      dataIndex: 'childValue',
                      title: '子字段选项',
                      width: '40%',
                  }]}
                    datas={store.datas.slice()}
                    onChange={store.onChange}
                    tableProps={{
                        scroll: { y: 200}
                    }}
                    rowKey="randomkey"
                />
            </Dialog>
        )
    }
}